/**
 * 地块绘制工具
 */
import Base from "./Base";
import turf from "turf"
import mapboxgl from "mapbox-gl";
import MapCommon from "../common/MapCommon";
import _ from "lodash"


export default class Graffiti extends Base {
  constructor(map, {callBack: callBack, errorCallBack: errorCallBack}) {
    super(map, 'Graffiti', {callBack: callBack, errorCallBack: errorCallBack});
  }

  start() {
    super.start();
    this.disableMap();
    this.coordinates = [];
    this.mousedownEvent = e => {
      this.mousedown(e)
    }
    this.map.on("mousedown", this.mousedownEvent);
    this.map.on("touchstart", this.mousedownEvent);
  }


  enableViewMap() {
    this.map.dragPan.enable();
    this.map.touchZoomRotate.enable();
    this.map.doubleClickZoom.enable();
  }

  disableMap() {
    // //禁止拖拽地图
    this.map.dragPan.disable();
    // //禁止通过捏合屏幕进行缩放
    this.map.touchZoomRotate.disable();
    // //禁止双击缩放
    this.map.doubleClickZoom.disable();
  }


  mousedown() {
    this.coordinates = [];
    //鼠标落下时添加鼠标移动和抬起监听
    this.mouseMoveEvent = (e) => {
      this.mousemove(e)
    }
    this.map.on("mousemove", this.mouseMoveEvent);
    this.map.on("touchmove", this.mouseMoveEvent);
    this.mouseUpEvent = (e) => {
      this.mouseup(e)
    }
    this.map.on("mouseup", this.mouseUpEvent);
    this.map.on("touchend", this.mouseUpEvent);
    this.addDrawLayer();
  }

  mousemove(e) {
    this.coordinates.push([e.lngLat.lng, e.lngLat.lat]);
    this.updateDrawLayer();
  }

  mouseup(e) {
    this.coordinates.push(this.coordinates[0]);
    this.updateDrawLayer();
    // this.map.off("mousedown", this.mousedownEvent);
    this.map.off("mousemove", this.mouseMoveEvent);
    this.map.off("touchmove", this.mouseMoveEvent);
    this.map.off("mouseup", this.mouseUpEvent);
    this.map.off("touchend", this.mouseUpEvent);
    this.updateArea();
    this.finish(this.coordinates);
  }

//添加绘制图层
  addDrawLayer() {
    let geoJosn = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Polygon",
            coordinates: [],
          },
        },
      ],
    };
    if (!this.map.getSource("draw")) {
      this.map.addSource("draw", {
        type: "geojson",
        data: geoJosn,
      });
    }

    if (!this.map.getLayer("draw")) {
      this.map.addLayer({
        id: "draw",
        type: "fill",
        source: "draw",
        layout: {},
        paint: {
          "fill-color": "#F00",
          "fill-opacity": 0.3,
        },
      });
    }
    if (!this.map.getLayer("draw_line")) {
      this.map.addLayer({
        id: "draw_line",
        type: "line",
        source: "draw",
        layout: {},
        paint: {
          "line-color": "#F00",
          "line-width": 5,
        },
      });
    }
  }

  updateDrawLayer() {
    this.map.getSource("draw").setData({
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Polygon",
            coordinates: [this.coordinates],
          },
        },
      ],
    });
  }

  //编辑地块
  updateArea() {
    if (this.coordinates.length > 0) {
      let area = turf.area({
        type: "Feature",
        properties: {},
        geometry: {
          type: "Polygon",
          coordinates: [this.coordinates],
        },
      });
      // restrict to area to 2 decimal points
      let rounded_area = Math.round(area * 100 * 0.0015) / 100;
      this.roundedArea = rounded_area;
    }
  }


  close(notClearMap = false) {
    this.clear(notClearMap);
    this.clearEvent();
  }

  clear(notClearMap = false) {
    this.clearMap(notClearMap);
    this.enableViewMap();
  }

  clearMap(notClearMap = false) {
    //不清除地图选择绘制图层
    if (!notClearMap) {
      super.clearMap();
    }
    this.removeDrawLayer();

  }

  //移除绘制图层
  removeDrawLayer() {
    if (this.map.getLayer("draw")) {
      this.map.removeLayer("draw");
      this.map.removeLayer("draw_line");
    }
    if (this.map.getSource("draw")) {
      this.map.removeSource("draw");
    }
  }

  clearEvent() {
    super.clearEvent();
    this.map.off("mousedown", this.mousedownEvent);
    this.map.off("mousemove", this.mouseMoveEvent);
    this.map.off("mouseup", this.mouseUpEvent);
    this.map.off("touchstart", this.mousedownEvent);
    this.map.off("touchmove", this.mouseMoveEvent);
    this.map.off("touchend", this.mouseUpEvent);
  }
}
